<template>
  <div class="profile-container" :class="{ 'dark-mode': isDarkMode }">
    <!-- 导航栏 -->
    <nav class="nav-bar">
      <div class="nav-content">
        <div class="nav-left">
          <div class="theme-switch" @click="toggleTheme">
            <div class="switch-track">
              <i class="ri-sun-line sun-icon"></i>
              <i class="ri-moon-line moon-icon"></i>
              <div class="switch-thumb"></div>
            </div>
          </div>
          <div class="lang-switch" @click="toggleLang">
            <span :class="{ active: currentLang === 'zh' }">中</span>
            <span class="divider">/</span>
            <span :class="{ active: currentLang === 'en' }">EN</span>
          </div>
        </div>
        
        <div class="search-wrapper">
          <div class="search-bar">
            <i class="ri-search-line"></i>
            <input 
              type="text" 
              :placeholder="t('searchPlaceholder')"
              v-model="searchQuery"
            >
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="main-content">
      <!-- 个人信息卡片 -->
      <section class="hero-section">
        <div class="cover-wrapper">
          <img :src="creator.coverImage" alt="" class="cover-image">
          <div class="cover-overlay"></div>
        </div>
        
        <div class="profile-card">
          <div class="profile-header">
            <div class="avatar-container">
              <img :src="creator.avatar" alt="" class="avatar">
              <div class="status-indicator" v-if="creator.online"></div>
            </div>
            
            <div class="profile-info">
              <div class="name-badges">
                <h1 class="creator-name">{{ creator.name }}</h1>
                <div class="badge-list">
                  <div class="badge official" v-if="creator.isOfficial">
                    <i class="ri-verified-badge-fill"></i>
                    <span>{{ t('official') }}</span>
                  </div>
                  <div class="badge vip" v-if="creator.isVip">
                    <i class="ri-vip-crown-fill"></i>
                    <span>VIP</span>
                  </div>
                </div>
              </div>
              
              <p class="bio">{{ creator.bio || t('noBio') }}</p>
              
              <div class="stats-row">
                <div class="stat-item">
                  <span class="stat-value">{{ creator.followers }}</span>
                  <span class="stat-label">{{ t('followers') }}</span>
                </div>
                <div class="stat-divider"></div>
                <div class="stat-item">
                  <span class="stat-value">{{ creator.following }}</span>
                  <span class="stat-label">{{ t('following') }}</span>
                </div>
                <div class="stat-divider"></div>
                <div class="stat-item">
                  <span class="stat-value">{{ creator.posts }}</span>
                  <span class="stat-label">{{ t('posts') }}</span>
                </div>
              </div>
            </div>
            
            <div class="action-buttons">
              <button class="btn-follow">
                <i class="ri-user-add-line"></i>
                {{ t('follow') }}
              </button>
              <button class="btn-message">
                <i class="ri-message-3-line"></i>
                {{ t('message') }}
              </button>
            </div>
          </div>
        </div>
      </section>

      <!-- 活动日历 -->
      <section class="activity-section">
        <div class="section-header">
          <h2>{{ t('activityTitle') }}</h2>
          <div class="activity-legend">
            <div class="legend-item">
              <div class="legend-color activity-none"></div>
              <span>{{ t('noActivity') }}</span>
            </div>
            <div class="legend-item">
              <div class="legend-color activity-high"></div>
              <span>{{ t('highActivity') }}</span>
            </div>
          </div>
        </div>
        
        <div class="calendar-wrapper">
          <div class="calendar-grid">
            <div 
              v-for="(day, index) in activityData" 
              :key="index"
              class="day-cell"
              :class="getActivityClass(day.count)"
              :title="getActivityTitle(day)"
            ></div>
          </div>
        </div>
      </section>

      <!-- 作品展示 -->
      <section class="works-section">
        <h2>{{ t('worksTitle') }}</h2>
        <div class="works-grid">
          <div 
            v-for="work in creator.works" 
            :key="work.id" 
            class="work-card"
            @click="showWorkDetail(work)"
          >
            <div class="work-image">
              <img :src="work.cover" :alt="work.title">
              <div class="work-overlay">
                <i class="ri-eye-line"></i>
              </div>
            </div>
            <div class="work-info">
              <h3>{{ work.title }}</h3>
              <p>{{ work.description }}</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<style scoped>
.profile-container {
  --primary-color: #3b82f6;
  --primary-light: #60a5fa;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --border-color: #e5e7eb;
  
  min-height: 100vh;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.dark-mode {
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --bg-primary: #1f2937;
  --bg-secondary: #111827;
  --border-color: #374151;
}

/* 导航栏样式 */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--bg-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  z-index: 100;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.theme-switch {
  cursor: pointer;
}

.switch-track {
  width: 56px;
  height: 28px;
  background: var(--bg-secondary);
  border-radius: 14px;
  position: relative;
  padding: 2px;
  transition: all 0.3s ease;
}

.switch-thumb {
  width: 24px;
  height: 24px;
  background: var(--primary-color);
  border-radius: 50%;
  position: absolute;
  left: 2px;
  transition: all 0.3s ease;
}

.dark-mode .switch-thumb {
  left: 30px;
}

/* 主要内容区样式 */
.main-content {
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 24px;
}

.hero-section {
  position: relative;
  margin-bottom: 32px;
}

.cover-wrapper {
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
}

.profile-card {
  position: relative;
  margin-top: -80px;
  padding: 24px;
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.avatar-container {
  position: relative;
  margin-bottom: 16px;
}

.avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 4px solid var(--bg-primary);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.status-indicator {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  background: var(--success-color);
  border: 3px solid var(--bg-primary);
  border-radius: 50%;
}

.creator-name {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.badge-list {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
}

.badge.official {
  background: var(--primary-color);
  color: white;
}

.badge.vip {
  background: linear-gradient(45deg, var(--warning-color), #f97316);
  color: white;
}

.stats-row {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 24px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.stat-divider {
  width: 1px;
  height: 24px;
  background: var(--border-color);
}

.action-buttons {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.btn-follow,
.btn-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-follow {
  background: var(--primary-color);
  color: white;
}

.btn-follow:hover {
  background: var(--primary-light);
}

.btn-message {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-message:hover {
  background: var(--border-color);
}

/* 活动日历样式 */
.activity-section {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.activity-legend {
  display: flex;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  gap: 3px;
}

.day-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  transition: all 0.2s ease;
}

/* 作品展示样式 */
.works-section {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 24px;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.work-card {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary);
  transition: all 0.3s ease;
  cursor: pointer;
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.15);
}

.work-image {
  position: relative;
  height: 200px;
}

.work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.work-card:hover .work-overlay {
  opacity: 1;
}

.work-overlay i {
  color: white;
  font-size: 24px;
}

.work-info {
  padding: 16px;
}

.work-info h3 {
  margin: 0 0 8px;
  font-size: 1.125rem;
  color: var(--text-primary);
}

.work-info p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .nav-content {
    padding: 0 16px;
  }
  
  .main-content {
    padding: 16px;
  }
  
  .cover-wrapper {
    height: 200px;
  }
  
  .profile-card {
    margin-top: -60px;
  }
  
  .avatar {
    width: 120px;
    height: 120px;
  }
  
  .works-grid {
    grid-template-columns: 1fr;
  }
}
</style>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const isDarkMode = ref(false)
    const currentLang = ref('zh')
    const searchQuery = ref('')
    
    // 本地化文本
    const texts = {
      zh: {
        searchPlaceholder: '搜索...',
        official: '官方认证',
        noBio: '这个人很懒，什么都没写',
        followers: '关注者',
        following: '关注中',
        posts: '作品',
        follow: '关注',
        message: '私信',
        activityTitle: '活动记录',
        worksTitle: '作品展示'
      },
      en: {
        searchPlaceholder: 'Search...',
        official: 'Official',
        noBio: 'No bio yet',
        followers: 'Followers',
        following: 'Following',
        posts: 'Posts',
        follow: 'Follow',
        message: 'Message',
        activityTitle: 'Activity',
        worksTitle: 'Works'
      }
    }

    // 本地化函数
    const t = (key) => {
      return texts[currentLang.value][key] || key
    }
    
    // 模拟数据
    const creator = ref({
      name: '创作者名称',
      avatar: 'avatar.jpg',
      coverImage: 'cover.jpg',
      bio: '创作者简介...',
      isOfficial: true,
      isVip: true,
      followers: 1234,
      following: 321,
      posts: 56,
      online: true,
      works: [
        {
          id: 1,
          title: '作品标题',
          description: '作品描述...',
          cover: 'work1.jpg'
        }
      ]
    })

    // 生成活动数据
    const activityData = computed(() => {
      return Array(365).fill().map(() => ({
        count: Math.floor(Math.random() * 5),
        date: new Date()
      }))
    })

    const toggleTheme = () => {
      isDarkMode.value = !isDarkMode.value
    }

    const toggleLang = () => {
      currentLang.value = currentLang.value === 'zh' ? 'en' : 'zh'
    }

    // 活动等级样式
    const getActivityClass = (count) => {
      if (count === 0) return 'activity-none'
      if (count <= 2) return 'activity-low'
      if (count <= 4) return 'activity-medium'
      return 'activity-high'
    }

    // 活动提示文本
    const getActivityTitle = (day) => {
      const date = day.date.toLocaleDateString()
      const count = day.count
      return `${date}: ${count} 条活动`
    }

    // 显示作品详情
    const showWorkDetail = (work) => {
      console.log('Show work detail:', work)
      // 实现作品详情展示逻辑
    }

    return {
      isDarkMode,
      currentLang,
      searchQuery,
      creator,
      activityData,
      toggleTheme,
      toggleLang,
      t,
      getActivityClass,
      getActivityTitle,
      showWorkDetail
    }
  }
}
</script>
